<template>
	<view class="content">
		<Header></Header>
		<view class="index-main">
			<u-swiper :list="bannerList" mode='rect' border-radius='0' height='475'></u-swiper>
			<view class="notice-box">
				<u-notice-bar type="none" mode="vertical" :list="noticeList"></u-notice-bar>
			</view>
			<view class="news-box">
				<view class="new-image">
					<image src="../../static/new.png" mode=""></image>
					<view class="image-title">
						中鼎资信与省融资再担保有限责任公司签订战略合作协议
					</view>
				</view>
				<view class="news-list">
					<u-subsection :list="newsTabs" :current="current" mode='button' active-color='#fff'
						inactive-color='#000' button-color='#0056A2'></u-subsection>
					<view class="lists">
						<view class="list-item" v-for="(item,index) in newsList">
							<view class="item-content">
								<image src="../../static/0000.png" mode=""></image>
								{{item.title}}
							</view>
							<view class="item-date">{{item.date}}</view>
						</view>
						<view class="look-more">
							<u-button size='mini' :hair-line='false' :custom-style="customStyle">查看更多</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="divider"></view>
			<view class="garden-box">
				<view class="icon-title">
					<view class="title-left">
						<image src="../../static/icon1.png" mode=""></image>
						<view class="title-text">
							党建园地
						</view>
					</view>
					<view class="more">更多>></view>
				</view>
				<view class="garden-content">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item>
							<view class="swiper-item">
								<view class="item-body">
									<view class="item-img">
										<image src="../../static/garden.png" mode=""></image>
									</view>
									<view class="item-title">学习党的二十大精神 | 奋进新征程，我想对党说</view>
									<view class="item-time">2023-03-16</view>
								</view>
								<view class="item-body">
									<view class="item-img">
										<image src="../../static/garden.png" mode=""></image>
									</view>
									<view class="item-title">学习党的二十大精神 | 奋进新征程，我想对党说</view>
									<view class="item-time">2023-03-16</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="divider"></view>
			<view class="member-box">
				<view class="icon-title">
					<view class="title-left">
						<image src="../../static/icon2.png" mode=""></image>
						<view class="title-text">
							会员名录
						</view>
					</view>
					<view class="more">更多>></view>
				</view>
				<view class="member-list">
					<view class="member-item" v-for="(item,index) in memberList">
						<view class="member-img">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="member-content">
							<view class="member-name">{{item.name}}</view>
							<view class="member-text">统一社会信用代码：{{item.code}}</view>
							<view class="member-text">入会级别：{{item.level}}</view>
							<view class="member-text">归属地区：{{item.belongingPlace}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Footer></Footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				customStyle: {
					border: '1rpx solid #DFDFDF'
				},
				memberList: [{
					image: '../../static/member.png',
					name: '贵州省融资担保有限责任公司',
					code: '51520000770584540P',
					level: '副会长单位',
					belongingPlace: '省级'
				},
				{
					image: '../../static/member.png',
					name: '贵州省融资担保有限责任公司',
					code: '51520000770584540P',
					level: '副会长单位',
					belongingPlace: '省级'
				},
				{
					image: '../../static/member.png',
					name: '贵州省融资担保有限责任公司',
					code: '51520000770584540P',
					level: '副会长单位',
					belongingPlace: '省级'
				}],
				newsList: [{
						title: '380万元！贵州首笔“黔贸贷”落地',
						date: '2023-03-16'
					},
					{
						title: '380万元！贵州首笔“黔贸贷”落地',
						date: '2023-03-16'
					},
					{
						title: '380万元！贵州首笔“黔贸贷”落地',
						date: '2023-03-16'
					},
					{
						title: '380万元！贵州首笔“黔贸贷”落地',
						date: '2023-03-16'
					},
					{
						title: '380万元！贵州首笔“黔贸贷”落地',
						date: '2023-03-16'
					},
					{
						title: '380万元！贵州首笔“黔贸贷”落地',
						date: '2023-03-16'
					},
					{
						title: '380万元！贵州首笔“黔贸贷”落地',
						date: '2023-03-16'
					}
				],
				current: 1,
				newsTabs: [{
						name: '行业新闻'
					},
					{
						name: '协会新闻'
					},
					{
						name: '会员动态'
					},
					{
						name: '政策法规'
					}
				],
				noticeList: [
					'关于举办第三届理事会第二次会... 2023-03-16',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				bannerList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.divider {
		height: 30rpx;
		background: #F5F9FD;
		width: 100%;
	}

	.notice-box {
		margin: 0 10rpx;
		border-bottom: 1rpx solid #DFDFDF;
	}

	.news-box {
		padding: 20rpx;

		.new-image {
			position: relative;
			width: 100%;

			>image {
				width: 100%;
			}

			.image-title {
				padding: 10rpx;
				position: absolute;
				bottom: 10rpx;
				width: 100%;
				background-color: rgba(0, 0, 0, .6);
				// opacity: .6;
				color: #fff;
				// left: 10rpx;
				font-size: 24rpx;
			}
		}

		.lists {

			.look-more {
				margin: 40rpx;
				display: flex;
				justify-content: center;
			}

			.list-item {
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #DFDFDF;

				.item-content {
					display: flex;
					align-items: center;

					>image {
						margin-right: 10rpx;
						width: 10rpx;
						height: 10rpx;
					}
				}

				.item-date {
					color: #787878;
				}
			}
		}
	}

	.garden-box {
		padding: 20rpx;



		.garden-content {
			padding-top: 40rpx;
		}

		.swiper-item {
			display: flex;
			justify-content: space-between;

			.item-body {
				width: 48%;
				box-shadow: 4rpx 6rpx 4rpx #eee;

				.item-img {
					width: 100%;
					height: 255rpx;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				.item-time {
					color: #787878;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	swiper {
		height: 450rpx;
	}

	.member-box {
		padding: 20rpx;

		.member-list {

			.member-item {
				display: flex;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #E9E9E9;

				.member-img {
					width: 236rpx;
					height: 176rpx;
					margin-right: 10rpx;
					border: 1rpx solid #E8F4FF;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				.member-content {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.member-name {
						color: #333333;
					}

					.member-text {
						color: #666666;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.icon-title {
		display: flex;
		justify-content: space-between;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #285CAC;

		.title-left {
			display: flex;
			align-items: center;
			color: #285CAC;
			font-size: 30rpx;
			font-weight: bold;

			>image {
				margin-right: 5rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}

		.more {
			color: #666666;
			font-size: 24rpx;

		}
	}
</style>